<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex 布局</title>
    <style>
        /* 父容器 基本的 flex 容器设置*/
      .baseflex {
            display: flex;
            background-color: lightgray;
            margin: 8px;
         
        }

        /* 子元素 */
      .baseflex div {
            width: 150px;
            height: 100px;
            background-color: rgb(6, 119, 122);
            color: #fff;
            margin: 10px;
            padding: 20px;
        }
        span{
            color: #f00606;
        }
    </style>
</head>

<body>
  <p>flex布局原理：就是通过给父盒子设置display:flex;来使得子元素具有弹性布局的能力。</p>
  <h3> Flexbox布局的父容器的属性有：</h3>
   <p>flex-direction:设置主轴的方向,row(默认)和column，决定主轴的方向，他的属性值有row(就是从左到右)和column(就是从上到下)还有reverse(就是从右到左)和column-reverse(就是从下到上)；</p>
   <p>justify-content:设置主轴的对齐方式,flex-start(默认就是从头开始)、flex-end( 就是从尾开始)、center( 就是居中)、space-between(就是两端对齐)、space-around(就是两侧对齐);</p>
   <p>align-items:设置交叉轴也就侧轴的对齐方式,flex-start(默认就是从头开始)、flex-end( 就是从尾开始)、center( 就是居中)、baseline(就是基线对齐)、stretch(就是拉伸);</p>
   <p>flex-wrap:设置子元素的换行方式，默认nowrap(就是不换行)，他的属性值还有wrap(就是自动换行)和wrap-reverse(就是反向换行);</p>
   <p>align-content:多行的时候的对齐方式,flex-start(默认就是从头开始)、flex-end( 就是从尾开始)、center( 就是居中)、space-between(就是两端对齐)、space-around(就是两侧对齐);</p>
   <h3>子元素的属性有：</h3>
        <p>order:设置子元素的排列顺序，默认就是0，值越小越靠前，值越大越靠后;</p>
        <p>flex-grow:设置子元素的放大比例，默认就是0，值越大，子元素的宽度和其他子元素的宽度比例越大;</p>
        <p>flex-shrink:设置子元素的缩小比例，默认就是1，值越大，子元素的宽度和其他子元素的宽度比例越小;</p>
        <p>flex-basis:设置子元素的初始宽度，默认就是auto，可以设置具体的像素值，也可以设置百分比值，比如50%；</p>
        <p>align-self:设置子元素的对齐方式，默认就是auto，可以设置flex-start、flex-end、center、baseline、stretch.</p>
        <p>注意：子元素的属性优先级比父容器的属性优先级高。
   
    <h3>一，flex-wrap:设置子元素的换行方式，默认 nowrap(就是不换行)，他的属性值还有 wrap(就是自动换行)和 wrap-reverse(就是反向换行);
      <span>此时如果给父元素设置了高度，可以看出子元素是浮动在父元素上的</span>
    </h3>
    <h6>1.flex-wrap: nowrap;这个是默认的，不换行，如果父元素太小，子元素会压缩，直到溢出</h6>
    <div class="baseflex " style="flex-wrap: nowrap; height: 200px;">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
    <h6>2.flex-wrap: wrap;自动换行,子元素会自动换行，如果父元素太小，子元素会自动换行，会撑开父元素，</h6>
    <div class="baseflex" style="flex-wrap: wrap; ">
      <!-- 如果给了父元素固定高度，子元素会自动换行，子元素会溢出父元素  -->
      <!-- <div class="baseflex" style="flex-wrap: wrap; height: 90px;"> -->
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        
    </div>
    <h6>3.flex-wrap: wrap-reverse;反向换行,不换行是正常的，从左到右，换行后却是从右到左了</h6>
    <div class="baseflex" style="flex-wrap: wrap-reverse;">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        
    </div>
    <h3>二，justify-content:设置主轴的对齐方式,center( 就是居中)、space-between(就是两端对齐)、space-around(就是两侧对齐)，flex-start(默认就是从头开始)、flex-end( 就是从尾开始)、;</h3>
    <h6>1.justify-content: center;主轴上子元素居中对齐，常用的</h6>
    <span> 这里可以加上align-content: center;或者align-items: center;来让子元素在交叉轴上也居中，以实现子元素上下左右居中，如何区分用align-items: center;还是align-content: center;呢？
     如果是一行就用align-items: center; 如果是多行就用align-content: center;而单行用align-items: center;多行用align-content: center;这两个属性不通用，用哪一个就看flex-wrap:是默认
     的nowrap还是修改为wrap了，如果是nowrap就用align-items: center;如果是wrap就用align-content: center;如果flex-wrap: wrap;比如父元素比较宽，就算子元素只有一行的时候，也能实现上下左右
     居中对齐，而如果没有修改为flex-wrap：wrap，用的默认的，就只能用align-items: center;，如果用align-content: center不生效;</span>
    <div class="baseflex" style="justify-content: center;height: 220px; ">
    
      <!-- <div class="baseflex" style="justify-content: center;height: 220px; align-content: center;"> -->
        <div>1</div>
        <div>2</div>
        <div>3</div>
      </div>
      <h6>2.justify-content: space-between;主轴上子元素两端对齐，常用的</h6>
    <div class="baseflex" style="justify-content: space-between;height: 220px;">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <h6>3.justify-content: space-around;主轴上子元素两侧对齐，常用的</h6>
    <div class="baseflex" style="justify-content: space-around;height: 220px;">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <h6>4.justify-content: flex-start;主轴上子元素从头开始对齐</h6>
    <div class="baseflex" style="justify-content: flex-start;height: 220px;">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <h6>5.justify-content: flex-end;从尾开始对齐</h6>
    <div class="baseflex" style="justify-content: flex-end;height: 220px;">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <h3>三，align-items:单行时，设置交叉轴也就侧轴的对齐方式,flex-start(默认就是从头开始)、flex-end( 就是从尾开始)、center( 就是居中)、
      baseline(就是基线对齐)、stretch(就是拉伸);<span>此时要注意的是flex-wrap: nowrap;要为默认值，子元素不会换行，这里是针对单行的，
        就没有space-between和space-around的属性了，但是可以用align-self来设置子元素的对齐方式，</span></h3>
    <h6>1.align-items: flex-start;在交叉轴也就是侧轴 副轴方向的对齐方式：从头开始对齐</h6>
    <div class="baseflex" style="height: 200px; align-items: flex-start;">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <h6>2.align-items: flex-end;在交叉轴也就是侧轴 副轴方向的对齐方式：从尾开始对齐</h6>
    <div class="baseflex" style="height: 200px; align-items: flex-end;">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <h6>3.align-items: center;在交叉轴也就是侧轴 副轴方向的对齐方式：居中对齐，配合justify-content: center;可以实现子元素上下左右居中对齐，常用</h6>
    <div class="baseflex" style="height: 200px; align-items: baseline;">
        <div style="line-height: 30px;">1</div>
        <div style="line-height: 40px;">2</div>
        <div style="line-height: 50px;">3</div>
        <div style="line-height: 30px;">1</div>
        <div style="line-height: 40px;">2</div>
        <div style="line-height: 50px;">3</div>
    </div>
    <h6>4.align-items: baseline;在交叉轴也就是侧轴 副轴方向的对齐方式：基线对齐</h6>
    <div class="baseflex" style="height: 200px; align-items: stretch;">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    
    <h3>四、align-content:多行的时候的交叉轴的对齐方式,flex-start(默认就是从头开始)、flex-end( 就是从尾开始)、center( 就是居中)、
      space-between(就是两端对齐)、space-around(就是两侧对齐); <span>此时要注意的是flex-wrap: wrap;子元素要会换行，并且父元素要设置比较高的高度
        ，定义说的是多行，但是单行也生效，所以上下左右居中的时候也可以用这个，到时试试，然后注意，观察的是侧轴，不要看主轴了</span></h3>
        <h6>1.align-content: flex-start;在交叉轴也就是侧轴 副轴方向的对齐方式：从头开始对齐</h6>
    <div class="baseflex " style="flex-wrap: wrap; align-content: flex-start; height: 390px; ">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        
    </div>
    <h6>2.align-content: flex-end;在交叉轴也就是侧轴 副轴方向的对齐方式：从尾开始对齐</h6>
    <div class="baseflex" style="flex-wrap: wrap; align-content: flex-end; height: 390px; " >
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
       
    </div>
        <h6>3.align-content: center;在交叉轴也就是侧轴 副轴方向的对齐方式：居中对齐</h6>
    <div class="baseflex" style="flex-wrap: wrap; align-content: center; justify-content: center; height: 390px;">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
    <h6>4.align-content: space-between;在交叉轴也就是侧轴 副轴方向的对齐方式：两端对齐</h6>
    <div class="baseflex" style="flex-wrap: wrap; align-content: space-between; height: 390px;">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
    <h6>5.align-content: space-around;在交叉轴也就是侧轴 副轴方向的对齐方式：两侧对齐</h6>
    <div class="baseflex" style="flex-wrap: wrap; align-content: space-around; height: 390px;">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>


    <h2>子元素常用属性示例代码如下：</h2>
 
    <p>子元素的属性有：</p>
    <p>order:设置子元素的排列顺序，默认就是 0，值越小越靠前，值越大越靠后;</p>
    <div class="baseflex">
        <div style="order: 2;">1</div>
        <div style="order: 1;">2</div>
        <div style="order: 0;">3</div>
    </div>
    <p>flex-grow:设置子元素的放大比例，默认就是 0，值越大，子元素的宽度和其他子元素的宽度比例越大;</p>
    <div class="baseflex">
        <div style="flex-grow: 1;">1</div>
        <div style="flex-grow: 2;">2</div>
        <div style="flex-grow: 3;">3</div>
    </div>
    <p>flex-shrink:设置子元素的缩小比例，默认就是 1，值越大，子元素的宽度和其他子元素的宽度比例越小;</p>
    <div class="baseflex">
        <div style="flex-shrink: 1;">1</div>
        <div style="flex-shrink: 2;">2</div>
        <div style="flex-shrink: 3;">3</div>
    </div>
    <p>flex-basis:设置子元素的初始宽度，默认就是 auto，可以设置具体的像素值，也可以设置百分比值，比如 50%；</p>
    <span>注意：如果设置了 flex-basis，则 flex-grow 和 flex-shrink 失效，子元素的宽度就是 flex-basis 的值。
      flex-basis的意思是子元素的初始宽度，尽量不低于这个值，
    </span>
    <div class="baseflex">
        <div style="flex-basis: 200px;">1</div>
        <div style="flex-basis: 150px;">2</div>
        <div style="flex-basis: 100px;">3</div>
    </div>
    <p>align-self:设置子元素的对齐方式，默认就是 auto，可以设置 flex-start、flex-end、center、baseline、stretch.</p>
    <div class="baseflex">
        <div style="align-self: flex-start;">1</div>
        <div style="align-self: flex-end;">2</div>
        <div style="align-self: center;">3</div>
    </div>
    <p>注意：子元素的属性优先级比父容器的属性优先级高。</p>
</body>

</html>